<template>
  <div class="ele-tree-wrapper">
    <el-row :gutter="24">
      <el-col :span="24">
          <div style="height: 100%">
            <el-tree :data="treeData" node-key="departmentId" default-expand-all
              @node-click="handleBucketClick"
              :check-on-click-node='true'>
                <span class="show-hide custom-tree-node" slot-scope="{ node, data }">
                  <span>
                    <el-radio v-model="radios" :label="data.id"><br></el-radio>
                    {{ node.label }}
                  </span>
                  <span class="operating" style="display:none">
                  <el-button type="text" size="mini" @click="() => append(data)">
                    <i class="el-icon-plus"></i>
                  </el-button>
                  <el-button type="text" size="mini" @click="() => redact(node, data)">
                    <i class="el-icon-edit"></i>
                  </el-button>
                  <el-button type="text" size="mini" @click="() => remove(node, data)">
                    <i class="el-icon-delete-solid"></i>
                  </el-button>
                  </span>
                </span>
              </el-tree>
          </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'EleTree',
  props: {
        treeData: [],
    },
  data() {
    return {
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      count: 1,
      radios:11
    }
  },
  mounted(){
    console.log(this.treeData);
    this.radios = this.treeData[0].children[0].id;
  },
  methods: {
    handleBucketClick(row) {
      console.log(row)
      this.$emit("listenToChildEvent",row);
      this.radios = row.id
    },
  
  }
}
</script>
<style lang="less" scoped>
.el-row{
  margin: 0 !important;
}
/deep/ .el-tree-node{
      .is-leaf + .el-checkbox .el-checkbox__inner{
          display: inline-block;
      }
      .el-checkbox .el-checkbox__inner{
          display: none;
      }
      .el-radio__label{
        padding-left: 0;
      }
  }

</style>